<template>
  <div class="container">
    <div class="box">
      <header class="header">
        <van-nav-bar
          :title="name"
          left-text="返回"
          left-arrow
          @click-left="onClickLeft"
          @click-right="onClickRight"
        />
      </header>
      <div class="content" id="text">
         <div>
          <van-swipe class="my-swipe" indicator-color="#1989fa">
            <van-swipe-item v-for="item of detailimg" :key="item.index">
              <img v-lazy="item" class="proimg">
            </van-swipe-item>
          </van-swipe>
        </div>
        <div class="desc">{{ desc }}</div>
        <div>
          <p class="priceDesc">
            <span class="price">￥{{ price }}</span>
            <span class="oldPrice">￥{{ origin_price }}</span>
            <span class="share">
              <p class="iconfont icon-fenxiang shareicon"></p>
              分享
            </span>
          </p>
          <p class="name">{{ name }}</p>
        </div>
        <ul class="serve">
          <li><span class="iconfont icon-xuanzhongduihao serveicon"></span>满69元免邮费</li>
          <li><span class="iconfont icon-xuanzhongduihao serveicon"></span>官方唯一自营</li>
          <li><span class="iconfont icon-xuanzhongduihao serveicon"></span>正品保障直发</li>
          <li><span class="iconfont icon-xuanzhongduihao serveicon"></span>7天无理由退货</li>
          <li><span class="iconfont icon-xuanzhongduihao serveicon"></span>15天可换货</li>
          <li><span class="iconfont icon-xuanzhongduihao serveicon"></span>两年全国联保</li>
        </ul>
        <div v-html="detailHTML" class="detail">{{ detailHTML }}</div>
      </div>
    </div>
    <footer class="footer">
      <van-goods-action class="down">
        <van-goods-action-icon icon="chat-o" text="客服" @click="onClickIcon" />
        <van-goods-action-icon icon="cart-o" text="购物车" @click="gocart" />
        <van-goods-action-button class="cart" type="warning" text="加入购物车" @click="addCart" />
        <van-goods-action-button class="buy" type="danger" text="立即购买" />
      </van-goods-action>
    </footer>
  </div>
</template>

<script>
/* eslint-disable */
import Vue from 'vue'
import { Swipe, SwipeItem, Lazyload, Image, GoodsAction, GoodsActionIcon, GoodsActionButton, NavBar, Icon, Toast } from 'vant'
import { getDetailData, addCart } from '@/api'
Vue.use(Swipe) // Vue.use - 注册的组件
Vue.use(SwipeItem) // Vue.use - 注册的组件
Vue.use(Lazyload) // Vue.use - 注册的组件
Vue.use(Image) // Vue.use - 注册的组件
Vue.use(GoodsAction)
Vue.use(GoodsActionButton)
Vue.use(GoodsActionIcon)
Vue.use(NavBar)
export default {
  data () {
    return {
      proid: '',
      proimg: '',
      name: '',
      desc: '',
      price: 0,
      origin_price: 0,
      detailHTML: '',
      detailimg: '',
      type: '',
      keyword: '',
      hot: 0,
      sales: 0,
      stock: 0,
      rating: 0
    }
  },
  mounted () {
    const { proid } = this.$route.params
    getDetailData({ proid }).then(res => {
      console.log(res.data)
      const { proid, proimg, name, desc, price, origin_price, detailHTML, detailimg, type, keyword, hot, sales, stock, rating } = res.data.data
      this.proid = proid
      this.proimg = proimg
      this.name = name
      this.desc = desc
      this.price = price
      this.origin_price = origin_price
      this.detailHTML = detailHTML
      this.detailimg = detailimg.replace(/"/g, "").replace(/\[/g, '').replace(/\]/g, '').split(',')
      this.type = type
      this.keyword = keyword
      this.hot = hot
      this.sales = sales
      this.stock = stock
      this.rating = rating
    })
  },
  methods: {
    onClickIcon() {
      Toast('点击图标');
    },
    addCart() {
        // 判断用户是不是登陆状态
      if (localStorage.getItem('loginState') === 'ok') {
        // 登陆
        addCart({
          userid: localStorage.getItem('userid'),
          proid: this.proid,
          num: 1
        }).then(res => {
          const { code } = res.data
          if (code === '200') {
            Toast('加入购物车成功')
          } else if (code === '10101') {
            Toast('加入失败')
          }
        })
      } else {
        // 未登录
        this.$router.push('/login')
      }
    },
    onClickLeft() {
      this.$router.go(-1)
    },
    onClickRight() {
      Toast('按钮');
    },
    gocart() {
      this.$router.push('/cart')
    }
  }
}
</script>

<style lang="scss" scoped>
@import '@/lib/reset.scss';
.proimg{
  width: 100%;
}
.desc{
  height: 0.7rem;
  background-color: #d6bd7a;
  text-align: center;
  color: white;
  line-height: 0.7rem;
}
.serve{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  li{
    width: 33%;
    font-size:0.12rem;
    line-height: 0.28rem;
    color: #808080;
    padding-left: 0.2rem;
    .serveicon{
      color: red;
    }
  }
}
.priceDesc{
  padding-top: 0.17rem;
  padding-left: 0.17rem;
  .price{
    font-size: 0.26rem;
    color: #de3e26;
  }
  .oldPrice{
    font-size: 0.14rem;
    color: #808080;
    text-decoration: line-through;
    padding-left: 0.18rem;
  }
  .share{
    float: right;
    font-size: 0.12rem;
    color: #808080;
    text-align: center;
    padding:0 0.08rem 0 0.08rem;
    border-left: 1px #d8d8d8 solid;
    height: 0.3rem;
    .shareicon{
      color: #f56842;
      font-size: 0.12rem;
    }
  }
}
.name{
  font-size: 0.2rem;
  padding: 0rem 0 0.1rem 0.18rem;
 }
 .my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  background-color: #39a9ed;
}
.detail{
  width: 100%;
    /deep/ img{
      width: 100%;
    }
}
footer{
  .down{
    border-top:1px solid #808080;
  }
  .cart{
    border-radius: 30px;
    margin-right: 0.15rem;
  }
  .buy{
    border-radius: 30px;
  }
}
</style>
